<template>
  <div id="abnormal">
    <div class="homeTitle">异常业务预警详情</div>
    <div class="abcon">
      <div id="myChartCity"></div>
      <div class="abright">
        <div class="abrt">近七日预警情况</div>
        <!-- 查询 -->
        <div class="abquery">
          <div class="abcity">
            <span>地市：</span>
            <el-select v-model="city" placeholder="请选择" size="small" @change="cityChange">
              <el-option
                v-for="item in cityOption"
                :key="item.name"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </div>
          <div class="abcity">
            <span>机构\行社：</span>
            <el-select v-model="bankId" placeholder="请选择" size="small" @change="querys">
              <el-option
                v-for="item in bankOption"
                :key="item.name"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 警示进度条 -->
        <div class="warnProgress" v-if="show && qId != 3">
          <div class="ablist" v-for="item in showStatus" :key="item.bankId">
            <div class="listName">{{item.bankName}}</div>
            <div class="tiao">
              <el-progress :percentage="item.rate" color="#C99746" :show-text='false'></el-progress>
              <div class="text">{{item.count}}</div>
            </div>
          </div>
        </div>
        <!-- 饼形图 -->
        <div class="bingtu" v-else>
          <!-- xxx行名字 -->
          <div class="single">
            <div class="listName">{{bingbank}}</div>
            <div class="tiao">
              <el-progress :percentage="100" color="#C99746" :show-text='false'></el-progress>
              <div class="text">{{bingcount}}</div>
            </div>
          </div>
          <!-- ---echars------- -->
          <div class="echars">
            <div class="circle" ref="myChart"></div>
          </div>
        </div>
      </div>
      <!-- ------------点击出现动画页面---------------------- -->
      <div v-if="animation" :class="[showIn ? 'fadeInRight' : '', showOut ? 'fadeOutRight' : '', 'donghua', 'animated']">
        <div class="antitle">
          <span class="title" style="font-size: 18px;">行社预警信息</span>
          <span>
            <el-button @click="closedh" type="primary" size="small">关闭</el-button>
          </span>
        </div>
        <div class="jinqi">
          <div class="senvenday" v-for="(item,index) in yujingArr" :key="index"> 
            <div class="date">日期： {{item.spotDate}}</div>
            <div class="listCon" v-for="(ele, k) in item.list" :key="k">
              <p class="onep">
                <span class="onespan">行社： {{ele.bankName}}</span>
                <span class="twospan"><i class="el-icon-warning"></i>{{ele.warnType}}</span>
              </p>
              <p class="twop">预警详情：<span>{{ele.descData}}</span></p>
            </div>
          </div>
        </div>          
      </div>
    </div>
    <abshow :isDetail='isDetail'></abshow>
  </div>
</template>

<script>
import abshow from './abShou.vue';
import geoJson from '../../../assets/js/hnEcharsMap.json'
export default {
  name: 'abnormal',
  components: {
    abshow
  },
  data () {
  // let self = this;
    return {
      citydata: '', //初始化数据
      // --------------右边----------
      city: '',
      cityOption: '',
      bankId: '',
      bankOption: '',
      // 右边进度条
      show: true,
      showIn: false,
      // 是否彈出
      showOut: false,
      // 是否在過程中
      showIng: false,
      animation: false,
      // -------showStatus接口数据-------------
      showStatus: '',
      yujingArr: '',
      bingbank: '',
      bingcount: '',
      binglist: [],
      isDetail: '',
      // ------------------
      qId: '',
      singleBankId: '',
    };
  },
  created() {
    let user = JSON.parse(sessionStorage.getItem('user'));
    this.qId = user.qId;
    if (user.qId == 3) {
      this.singleBankId = user.bankId;
      this.querys();
    }
  },
  mounted(){
    this.getCity();  //获取下拉菜单的城市
    this.getbank(); // 获取地图和银行
     let myChart = this.$echarts.init(document.getElementById("myChartCity"));
      myChart.on('click', (params)=> {
        let str = params.name;
        let names = str.substring(0,str.length-1);
        this.getyujing(names);
    });
  },
  methods: {
    // 根据地区查看预警信息列表
    getyujing(name) {
      this.axios.get('unusualWarn/findByLocation', {params: {location: name}})
      .then(({data})=> {
        this.yujingArr = data.data
        if(this.yujingArr.length == 0) {
          this.$message({message: '暂无数据',type: 'warning'});
        } else {
          this.ceshi();
        }
      })
    },
    // 查询饼形图
    querys () {
      let paramsId = '';
      if (this.qId == 3) {
        paramsId = this.singleBankId;
      } else {
        paramsId = this.bankId;
      }
      this.axios.get('unusualWarn/showTypeStatus',{params: {bankId: paramsId}})
        .then(({data})=> {
          if (data.code == 200) {
            this.bingbank = data.data.bankName;
            this.bingcount = data.data.total-0;
            let shuju = data.data;
            let bingList = [];
            for(let k in shuju) {
              if (k == 'bankName' || k == 'total') {
                continue;
              } else {
                 bingList.push({value: shuju[k], name: k})
              }
            }
            // list.forEach((item, index) => {
            //   bingList.push({value: item.count, name: item.warnType})
            // })
            this.binglist = bingList;
            setTimeout(()=>{this.drawLine()}, 10);

            this.show= false;
          }
        })
    },
    ceshi () {
      if (this.showIng) return false;
      this.showIng = true;
      this.animation = true;
      this.showOut = false;
      this.showIn = true;
      setTimeout(()=>{this.showIng = false;}, 1100);
    },
    closedh () {
      if (this.showIng) return false;
      this.showIng = true;
      this.showIn = false;
      this.showOut = true;
      setTimeout(()=>{this.animation = false; this.showIng = false;}, 1100);
    },
    drawLine(){
      // 基于准备好的dom，初始化echarts实例
      // let myChart = this.$echarts.init(document.getElementById('myChart'))
      let myChart = this.$echarts.init(this.$refs.myChart)
      // 绘制图表
      myChart.setOption(
        {
          calculable : true,
          tooltip : {
          trigger: 'item',
          // formatter: (data)=> {return data.data.name+'：'+data.data.value+'%'}
        },
          series : [
              {
                  // name:'访问来源',
                  type:'pie',
                  radius : '50%',
                  center: ['50%', '50%'],
                  data: this.binglist
              }
          ]
      }
      );
    },
     // ---------二级联动开始----------------------
    // 地市查询
    getCity() {
      this.axios.get('organizationalChart/selectCityByQid')
      .then(({data}) => {
          this.cityOption = data.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    // 地市改变 
    cityChange() {
     let obj = this.cityOption.find((ele)=> {
        return ele.name == this.city;
      });
      this.bank = '';
      this.bumen = '';
      this.keshi = '';
      this.axios.get('organizationalChart/selectBankByQid', {params: {id: obj.id}})
        .then(({data}) => {
          this.bankOption = data.data;
          this.bankId = '';
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    getbank() {
      this.axios.get('unusualWarn/showStatus')
        .then(({data})=> {
          let loca = data.data.location;
          let location = loca.map((item)=> {
            return {count: item.count, location: item.location+'市'}
          })
          let cityData = [{name: '郑州市'},{name: '洛阳市'},{name: '开封市'},{name: '信阳市'},{name: '驻马店市'},{name: '南阳市'},{name: '周口市'},{name: '许昌市'},{name: '平顶山市'},{name: '新乡市',},{name: '漯河市',},{name: '商丘市',},{name: '三门峡市',},{name: '济源市',},{name: '焦作市',},{name: '安阳市',},{name: '鹤壁市',},{name: '濮阳市',},{name: '开封市'}]
          location.forEach(ele => {
            cityData.forEach(item => {
              if(ele.location == item.name) {
                item.value = ele.count
              }
            })
          });
          this.citydata = cityData;
          this.showStatus = data.data.status;
          this.showProvince();
        })
    },
    showProvince() {
    let name = 'hn';
    // 基于准备好的dom，初始化echarts实例
    let myChart = this.$echarts.init(document.getElementById("myChartCity"));
      this.$echarts.registerMap(name, geoJson);
      myChart.setOption({
            visualMap: {
                // min: 0,
                // max: 100,
                // left: '-600px',
                // top: 'bottom',
                // text: ['高', '低'], // 文本，默认为数值文本
                // calculable: true,
                color: ['lightskyblue','#E6B312', 'yellow'] ,
                show: false              
            },
            series: [{
                type: 'map',
                mapType: name,
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        textStyle: {
                            color: '#000'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: '#389BB7',
                        areaColor: '#fff',
                    },
                    emphasis: {
                        areaColor: '#D0EDED',
                        borderWidth: 0
                    },                    
                },
                subtextStyle: {
                  color: '#58d9df',
                  fontStyle: 'normal',
                  fontWeight: 'bold',
                  fontSize: 16
                },
                animation: false,
                data: this.citydata
            }],
        });
   }
  },
  beforeRouteEnter(to, from, next){
    next(vm=>{
      if(from.path=='/abnormaldetail' && sessionStorage.abshowParams) {
        vm.isDetail = true;
      } else {
        vm.isDetail = false;
        sessionStorage.removeItem('abshowParams');
      }
    })
  },
};
</script>

<style lang="scss">
  #abnormal {
    @keyframes opc {
      0%   {opacity: 0;}
      50%  {opacity: 1;}
      100% {opacity: 0;}
    }
    .abmarker {
      background: #FF8800;
      text-align:center;  
      height: 12px; 
      width: 12px; 
      border-radius: 6px; 
      box-shadow: 0px 0px 8px 6px #FF8800;
      animation-direction: alternate;
      animation: opc 2s infinite;
    }
    .abcon {
      height: 590px;
      padding: 20px;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, .3);
      border-top: 1px solid #ccc;
      display: flex; 
      justify-content: space-between;
      position: relative;
      #myChartCity {
        min-width: 550px;
        height: 550px;
      }
      .abright {
        margin-left: 20px;
        width: 55%;
        position: relative;
        // min-width: 600px;
        .abrt {
          color: white;
          margin-bottom: 15px;
          font-size: 20px;
        }
        .abquery {
          display: flex;
          justify-content: flex-start;
          margin-bottom: 30px;
          .abcity {
            margin-right: 60px;
            span {
              color: white;
            }
          }
        }
        .warnProgress {
          position: absolute;
          top: 150px;
          right: 0;
          left: 0;
          bottom: 0;
          overflow: auto;
          .ablist {
            display: flex;
            justify-content: flex-start;
            height: 36px;
            align-items: center;
            .listName {
              width: 160px;
              color: white;
            }
            .tiao {
              display: flex;
              width: 100%;
              align-items: center;
              .el-progress {
                width: 80%;
              }
              .text {
                padding-left: 20px;
                color: white;
              }
            }
          }
        }
        .bingtu {
          width: 100%;
          .single {
            display: flex;
            justify-content: flex-start;
            .listName {
              // width: 30%;
              color: white;
              margin-right: 20px;
            }
            .tiao {
              height: 30px;
              width: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              .el-progress {
                width: 100%;
              }
              .text {
                padding-left: 20px;
                color: white;
              }
            }
          }
          .circle {
            width: 654px;
            height: 400px;
          }
        }
      }
      // 黑色背景侧边滑动
      .donghua {
        position: absolute;
        width: 55%;
        min-width: 640px;
        top: 0;
        bottom: 0;
        right: 0;
        bottom: 0;
        padding: 10px 0px 20px;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, .9);
        .antitle {
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: space-around;
          .title {
            color: white;
          }
        }
        .jinqi {
          position: absolute;
          top: 70px;
          width: 100%;
          padding: 0 20px;
          box-sizing: border-box;
          bottom: 20px;
          overflow-y: auto;
          .senvenday {
          .date {
            color: #148de7;
          }
          .listCon {
            .onep {
              padding-left: 20px;
              margin: 10px 0;
              display: flex;
              justify-content: space-between;
              line-height: 24px;
            }
            .twop {
              padding-left: 20px;
              color: white;
              font-size: 14px;
            }
            .onespan {
              color: white;
            }
            .twospan {
              color: #ff8080;
              display: inline-block;
              width: 280px;
              font-size: 12px;
              i {
                margin-right: 10px;
              }
             }
            }
          }
        }
      }
    }
  }
</style>
